<template>
    <div class="dialog" v-if="modelValue">
        <div class="dialog-header">
            <div>标题--{{title}}</div>
            <div @click="close">x</div>
        </div>
        <div class="dialog-content"></div>
    </div>
</template>

<script setup lang="ts">

type Props = {
    modelValue: boolean,             // 接收的值，默认值变量名： modelValue
    title: string,                   // 父组件 v-model:title 自定义的名称
    modelModifiers?: {               // 在props 的这里 注册自定义的 修饰符名， 这里的 ? 表示非必要的属性
        balabala: boolean
    },
    titleModifiers?: {
        didi: boolean
    }
}

// defineProps<Props>()
const props = defineProps<Props>()

const emit = defineEmits(["update:modelValue", "update:title"])  

const close = () => {
    // emit("update:modelValue", false)
    // emit("update:title", "我是一只猫")
    console.log(props.modelModifiers);
    // if(props.modelModifiers?.balabala) {
    //     emit("update:title", "我是一只猫!")
    // }else {
    //     emit("update:title", "我是一条狗!")
    // }
    console.log(props.titleModifiers);
    if(props.titleModifiers?.didi) {
        emit("update:title", "我是一只猫!")
    }else {
        emit("update:title", "我是一条狗!")
    }
}


</script>

<style lang="less" scoped>
.dialog {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rebeccapurple;
    transform: translate(-50%, -50%);
    &-header {
        height: 30px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rebeccapurple;
    }
}
</style>